<template>
  <div class="nearBy-page">
    <GhNavBar title="附近心灵驿站"  />
    <div class="map-box">
      <baidu-map 
      class="bm-view"
      :center="center" 
      :zoom="zoomLevel"
      :scroll-wheel-zoom="true"
      @ready="handler"
      :mapClick="false"
    > 
    <!-- // 缩放控件 -->
      <bm-navigation  anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-city-list class="city-box" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>

    <!-- 定位 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true"></bm-geolocation>

     <bm-copyright anchor="BMAP_ANCHOR_TOP_RIGHT" :copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>小霖平台</a>'}]">
    </bm-copyright>
     <!--标注点  animation="BMAP_ANIMATION_BOUNCE"-->
     <div v-for="marker in markers" :key="marker.lng">
      <bm-marker :position="{lng: marker.lng, lat: marker.lat}" @click="markerClick(marker)">
      </bm-marker>
      <bm-label
        :content="marker.content"
        :offset="{width:-55,height:-65}"
        :position="{lng: marker.lng, lat: marker.lat}"
        :labelStyle="{border:'1px solid #6ea4cd', padding:'8px',fontWeight: '600',fontSize:'14px',cursor: 'pointer'}"
        :title="marker.content"
        @click="markerClick(marker)"
      />
    </div>
    </baidu-map>
  

    </div>
    <div class="bottom-box">
      <van-search placeholder="请输入搜索关键词" />
    </div>
    
  </div>
</template>

<script setup>
import {ref,onMounted,nextTick} from "vue"
import GhNavBar from '@/components/gh-nav-bar.vue'
 
const center = ref({lng: 113.302, lat: 23.223});

const markers=ref([])
const zoomLevel = ref(18); // 初始缩放级别
onMounted(()=>{
  markers.value=[{
        lng: 116.404,
        lat: 39.915,
        content:"TCL液晶产业园"
      }, {
        lng: 115.504,
        lat: 39.915,
        content:"TCL产业园"
      }]
})

  const  draw =({el, BMap, map})=> {
//        let point = new BMap.Point(116.404, 39.915)
//        map.addOverlay(point)
        const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915))
        el.style.left = pixel.x - 60 + 'px'
        el.style.top = pixel.y - 20 + 'px'
      }


const  handler= ({BMap, map})=> {
        // 自动获取展示的比例
        var view = map.getViewport(eval(markers.value))  ;
       center.value = view.center;
      }
  const  markerClick=()=>{
        debugger
        this.show = true
      },
      infoWindowClose=()=>{
        this.show = false
      }


</script>

<style lang="scss" scoped>
  .nearBy-page{
    /* display: flex;
    flex-direction: column; */
    width: 100%;
    height: 100vh;
    /* margin-bottom: 40px; */
    .map-box{
      position: relative;
      width: 100%;
      height: 100%;
      /* background: #f5f5f5; */
      .bm-view {
         margin: 44px 0 ;
         width: 100%;
         height: 82%;
         .city-box{
          height: 20px;
          width: 100%;
          position: absolute;
          left:0;
          top: 50px;
         }
     }
    }
    .bottom-box {
        position: fixed;
        left: 0;
        bottom:20px;
        /* height: 40px; */
        width: 100%;
      }
  }
 



    
</style>
